<admintpl file="header" />
</head>
<body>
<div class="wrap js-check-wrap">
	<ul class="nav nav-tabs">
			<li class="active"><a href="{:U('Map/storemap')}">门店地图</a></li>
		</ul>
	<div id="allmap" style="width: 80%; height:600px; overflow: hidden;zoom:1;position:relative;z-index:200;float: left">
		<div id="map" style="height:90%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>

	</div>
	<div class="aee" style="width: 20%;_height:200px; min-height:200px ;float: right">

		<label class="control-label" style="font-size: 20px;">区域</label>
		<foreach name="map" item="vo">
			<a href="javascript:;" id="b{$vo.id}" onclick="edit({$vo.id})">{$vo.map_name}</a><br/>
		</foreach>
		<a href="" id="mapnames"></a>
		<button class="btn btn-danger" style="margin-top: 10px;" onclick="clearAll()">清空</button>

	</div>

		<!-- Modal  添加-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearAll()"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">添加</h4>
					</div>
					<div class="modal-body" >
						<form class="form-horizontal" onsubmit="return false">
							<fieldset>
								<div class="control-group">
									<label class="control-label"><b style="color:red;">* </b> 门店编号</label>
									<div class="controls">
										<input type="text" id="store_code" name="store_code">
									</div>
								</div>
								<div class="control-group">
									<label class="control-label"><b style="color:red;">* </b> 地图名称</label>
									<div class="controls">
										<input type="text" id="map_name" name="map_name">
									</div>
								</div>
								<div class="control-group">
									<label class="control-label"><b style="color:red;">* </b> 地图编号</label>
									<div class="controls">
										<input type="text" id="map_code" name="map_code">
									</div>
								</div>
								<div class="control-group">
									<label class="control-label"><b style="color:red;">* </b> 色号</label>
									<div class="controls">
										<input type="text" id="color_code" name="color_code"/> <input id="color_button" class="btn btn-primary" type="button" value="选色" />
									</div>
								</div>
							</fieldset>
							<input type="reset" style="display:none;" />
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearAll()">删除</button>
						<button type="button" class="btn btn-success" onclick="add()">提交</button>
					</div>
				</div>
			</div>
		</div>

	<!-- Modal  编辑-->
	<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearAll()"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" >编辑</h4>
				</div>
				<div class="modal-body" >
					<form class="form-horizontal" onsubmit="return false">
						<fieldset>
							<div class="control-group">
								<label class="control-label"><b style="color:red;">* </b> 门店编号</label>
								<div class="controls">
									<input type="text" id="storecode" name="store_code">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label"><b style="color:red;">* </b> 地图名称</label>
								<div class="controls">
									<input type="text" id="mapname" name="map_name">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label"><b style="color:red;">* </b> 地图编号</label>
								<div class="controls">
									<input type="text" id="mapcode" name="map_code">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label"><b style="color:red;">* </b> 色号</label>
								<div class="controls">
									<input type="text" id="colorcode" name="color_code"/> <input id="colorbutton" class="btn btn-primary" type="button" value="选色" />
									<input type="hidden" id="id">
								</div>
							</div>
						</fieldset>
						<input type="reset" style="display:none;" />
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearAll()">取消</button>
					<button type="button" class="btn btn-success" onclick="edit_post()">编辑</button>
				</div>
			</div>
		</div>
	</div>
</div>


	<script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map('map');
        map.centerAndZoom('上海', 14);
        map.enableScrollWheelZoom();  //启用滚轮放大缩小
        map.disableDoubleClickZoom();  //禁用双击放大。
        var overlays = [];
        var arr = [];
        var overlaycomplete = function(e){
            overlays.push(e.overlay);
            var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
            for(var i=0;i<path.length;i++){
                arr[i] = [path[i].lng,path[i].lat];
            }
            $("#myModal").modal({backdrop: 'static', keyboard: false});
        };

        var styleOptions = {
            strokeColor:"red",    //边线颜色。
            fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 3,       //边线的宽度，以像素为单位。
            strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
            fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
        }
        //实例化鼠标绘制工具
        var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, //是否开启绘制模式
            enableDrawingTool: true, //是否显示工具栏
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                offset: new BMap.Size(5, 5), //偏离值
                drawingModes:[
                    BMAP_DRAWING_POLYGON
                ]
            },
            polygonOptions: styleOptions, //多边形的样式
        });
        //添加鼠标绘制工具监听事件，用于获取绘制结果
        drawingManager.addEventListener('overlaycomplete', overlaycomplete);
		//清除地图
        function clearAll() {
            for(var i = 0; i < overlays.length; i++){
                map.removeOverlay(overlays[i]);

                $("input[type=reset]").trigger("click");
            }
            map.clearOverlays();
            overlays.length = 0
        }

		//颜色
        $(function() {
            $("#color_button").bigColorpicker("color_code");
            $("#colorbutton").bigColorpicker("colorcode");
        });

        //模态框打开
		function motai(){
            $("#my_modal").modal({backdrop: 'static', keyboard: false});
		}

		//添加
        function add(){
            $(function(){
                $.ajax({
                    url:"{:U('Map/add_post')}",
                    type:'post',
                    dataType:'json',
                    data:{
                        'store_code':$('#store_code').val(),
                        'map_name':$('#map_name').val(),
                        'map_code':$('#map_code').val(),
                        'color_code':$('#color_code').val(),
                        'arr':arr,
                    },
                    success:function(result){
                        $("#myModal").modal('hide');
                        var text = "<a href='javascript:;' id='b"+result.id+"' onclick='edit("+result.id+")'>"+result.name+"</a><br/>";
                        $("#mapnames").append(text);
                        clearAll();
                    }
                })
            })
        }
		//编辑查看
        function edit(id){
            map.clearOverlays();
            $.ajax({
                url:"{:U('Map/edit')}",
                type:'post',
                dataType:'json',
                data:{
                    'id':id,
                },
                success:function(result) {
					var polygonArr = [];
                    for (var i = 0; i < result.arr.length; i++) {
						polygonArr.push(new BMap.Point(result.arr[i][0],result.arr[i][1]));
                    }
                    polygon = new BMap.Polygon(polygonArr,
					{strokeColor:result.color_code,fillColor:result.color_code, strokeWeight:3, strokeOpacity:0.8,fillOpacity:0.6,strokeStyle: 'solid'});  //创建多边形
                    polygon.addEventListener('ondblclick',motai);
                    polygon.addEventListener('click',function(){
                        polygon.enableEditing();//开启面编辑功能
					});
					map.addOverlay(polygon);   //增加多边形
                    map.disableDoubleClickZoom();//关闭双击放大
					$("#storecode").val(result.store_code)
                    $('#mapname').val(result.map_name)
					$('#mapcode').val(result.map_code)
                    $('#colorcode').val(result.color_code)
                    $('#id').val(result.id)
                }
            })
        }

        //编辑提交
        function edit_post(){
            var path = polygon.getPath();
            var list = [];
            for(var i=0;i<path.length;i++){
                list[i] = [path[i].lng,path[i].lat];
            }
            $(function(){
                $.ajax({
                    url:"{:U('Map/edit_post')}",
                    type:'post',
                    dataType:'json',
                    data:{
                        'id':$('#id').val(),
                        'store_code':$('#storecode').val(),
                        'map_name':$('#mapname').val(),
                        'map_code':$('#mapcode').val(),
                        'color_code':$('#colorcode').val(),
                        'arr':list,
                    },
                    success:function(result){
						$("#b"+result.id).text(result.name);
                        $("#my_modal").modal('hide');
                        clearAll();
                    }
                })
            })
        }

	</script>
	<script src="__PUBLIC__/js/common.js"></script>
</body>
</html>